<template>
  <div id="regulationorder">
    <div  style="display:flex;align-items: center;">
          <img class="top_img" src="@/assets/images/a8.png" style="width:35px;height:35px;margin-right:10px;"/>
          <div style="line-height: 40px;font-weight:bold;">调控订单</div>
    </div>
    <el-form ref="form" :model="form" label-width="70px">

      <div style="display:flex;">
          <div style="flex:1;display:flex;align-items: center;">
             <div style="width:50px;text-align-last: justify;margin-top:-12px;font-size: 14px;color: #606266;margin-right:10px;">查询项</div>


            <el-form-item label="订单编号" >
               <el-input v-model="form.pid" placeholder="订单编号"  style="width:140px;"></el-input>
            </el-form-item>

            <el-form-item label="账户查询" style="margin-left:10px;">
               <el-input v-model="form.phone" placeholder="账户"  style="width:140px;"></el-input>
            </el-form-item>

            <div class="buttoon_box">
                <div class="buttoon_box_item"  style="margin-left:10px;background:#FFC600;color:white;" @click="search_but1()">确 定</div>
                <div class="buttoon_box_item" style="margin-left:10px;border:1px solid #D9D9D9;" @click="refresh_but()">清 空</div>
            </div>
         </div>
         <!-- <div>
              <el-button class="custom_color_button" type="primary" @click="but1()">类别设置</el-button>
         </div> -->
      </div>

      <div style="display:flex;align-items: center;">
            <div style="width:50px;text-align-last: justify;margin-top:-12px;font-size: 14px;color: #606266;margin-right:10px;">筛选项</div>

            <el-form-item label="时间类型" >
                <el-select  v-model="form.select5_num" placeholder="时间类型" style="width:140px;" @change="select_change_time()">
                    <el-option  v-for="(item,index) in select5_data" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
             </el-form-item>

             <el-form-item v-if="form.select5_num == 2" label-width="0"  style="margin-left:10px;">
                    <el-date-picker  type="date"   placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form.onedate" style="width:140px;">
                    </el-date-picker>
              </el-form-item>

              <el-form-item v-if="form.select5_num == 1"  label-width="0px" style="margin-left:10px;">
                      <div style="display: flex;">
                            <el-date-picker  type="date"   placeholder="开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form.start" style="width:140px;"></el-date-picker>
                            <div style="width:20px;height:40px;line-height:40px;text-align: center;"> - </div>
                            <el-date-picker  type="date"   placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form.end" style="width: 140px;"></el-date-picker>
                      </div>
               </el-form-item>


            <el-form-item  label="订单类别" style="margin-left:10px;">
                <el-select  v-model="form.select_num_zy" placeholder="请选择蜂巢" style="width:140px;">
                    <el-option  v-for="(item,index) in select_data_zy" :key="index" :label="item.title" :value="item.maid"></el-option>
                </el-select>
            </el-form-item>

             <el-form-item  label="调控类别" style="margin-left:10px;">
                <el-select  v-model="form.select_num_tk" placeholder="调控类别" style="width:140px;">
                    <el-option  v-for="(item,index) in select_data_tk" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <div class="buttoon_box">
                <div class="buttoon_box_item"  style="margin-left:10px;background:#FFC600;color:white;" @click="search_but2()">确 定</div>
                <div class="buttoon_box_item" style="margin-left:10px;border:1px solid #D9D9D9;" @click="refresh_but()">清 空</div>
            </div>

      </div>



   </el-form>
   <!-- 渲染数据list -->
   <regulationorder-list :datalist="datalist"  @up_list_fun="list_fun"> </regulationorder-list>


   <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>








  </div>
</template>

<script>
import RegulationorderList from '@/view/Exchangeorder/RegulationorderList'
export default {
  name: 'regulationorder',
  data () {
    return {
        datalist:[],
        page:1,
        count:0,
        form:{
          phone:'',
          pid:'',
          select_num_zy:'',
          select_num_tk:0,
          select5_num:0,
          start:'',
          end:'',
          onedate:''
        },
        select_data_zy:[],
        select5_data:[{"id":0,"name":"全部时间"},{"id":1,"name":"按区间"},{"id":2,"name":"按日期"}],
        select_data_tk:[{"id":0,"name":"全部"},{"id":1,"name":"已调控"},{"id":2,"name":"未调控"}],
    }
  },
 components:{
    RegulationorderList
  },
  created(){
     this.list_fun()
     this.list_zy()

  },
  mounted (){

  },
  methods: {
      list_zy(){
        this.post("/manor/manorOption", {
        }).then(res => {
            this.select_data_zy = res.result
            //console.log(this.select_data_zy)
        })
      },
       list_fun(){
        //   this.post("/decompose/listOfData", {
        //       page:this.page,
        //       date_type:this.form.select5_num,
        //       onedate:this.form.onedate,
        //       start:this.form.start,
        //       end:this.form.end,
        //       account:this.form.phone,
        //       pid:this.form.pid,
        //       maid:this.form.select_num_zy,
	    //     }).then(res => {
        //     this.count = res.result.count
        //     this.datalist = res.result.list
        //     console.log(res)
        //  })
      },

       select_change_time(){
          if(this.form.select5_num == 0){
               this.form.start = ''
               this.form.end = ''
               this.form.onedate = ''
          }else if(this.form.select5_num == 1){
             this.form.onedate = ''
          }else if(this.form.select5_num == 2){
              this.form.start = ''
               this.form.end = ''
          }
     },
      search_but1(){
        this.page = 1
        this.list_fun()
      },
      search_but2(){
        this.page = 1
        this.list_fun()
      },
      refresh_but(){
        this.page = 1
        this.form={
          phone:'',
          pid:'',
          select_num_zy:'',
          select_num_tk:0,
          select5_num:0,
          start:'',
          end:'',
          onedate:''
        }
        this.list_fun()
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val
        this.list_fun()
        console.log(`当前页: ${val}`);
      }
  }
}
</script>


<style scoped>
.buttoon_box{
  display:flex;margin-bottom:10px;
}
.buttoon_box_item{
  height:40px;line-height:40px;width:60px;font-size:14px;text-align:center;border-radius:5px;
}
.el-input-box>>>input{
  padding: 0px 3px !important;
}
</style>
